<template>
	<view class="contont">
		<nav-bar :title="pageInfo.navbarTitle" :iconLeft="true" />

		<uni-forms :model="form" :rules="rules" ref="refForm" label-width="100px">
			<view class="content-bgc">
				<view class="b-con">
					<uni-forms-item label="回访客户" name="client">
						<uni-data-select v-model="form.client" :localdata="client_list" placeholder="请选择回访客户" mode="underline"
							required />
					</uni-forms-item>
					<uni-forms-item label="回访方式" name="way" required>
						<uni-easyinput v-model="form.way" placeholder="请输入回访方式，如：登门拜访" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="回访主题" name="title" required>
						<uni-easyinput v-model="form.title" placeholder="请输入回访主题" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="回访内容" name="content" required>
						<uni-easyinput type="textarea" v-model="form.content" placeholder="请输入回访内容" />
					</uni-forms-item>
					<uni-forms-item label="回访时间" name="visit_date" required>
						<view class="dateTimeBottom">
							<uni-datetime-picker type="datetime" placeholder="请选择回访时间" :clear-icon="false" v-model="form.visit_date"
								:border="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="受访人" name="interviewee" required>
						<uni-easyinput v-model="form.interviewee" placeholder="请输入回访主题" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="回访结果" name="res" required>
						<uni-easyinput type="textarea" v-model="form.res" placeholder="请输入回访结果" />
					</uni-forms-item>
					<uni-forms-item label="回访地点" name="address">
						<uni-easyinput type="textarea" v-model="form.address" placeholder="请输入回访地点" />
					</uni-forms-item>
					<uni-forms-item label="交通工具" name="traffic">
						<uni-easyinput v-model="form.traffic" placeholder="请输入交通工具" class="iptBor" :inputBorder="false" />
					</uni-forms-item>

					<uni-forms-item label="回访人" name="create_user_id">
						<uni-data-select v-model="form.create_user_id" :localdata="account_list" placeholder="请选择回访人"
							mode="underline" @change="accChange" />
					</uni-forms-item>
					<uni-forms-item label="备注" name="desc">
						<uni-easyinput type="textarea" v-model="form.desc" placeholder="请输入备注" />
					</uni-forms-item>
					<u-button type="primary" text="提交" @click="save"></u-button>
				</view>
			</view>
		</uni-forms>
	</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import clCallbackApi from '../../../api/clientt/cl_callback'
//页面标题
const pageInfo = reactive({
	navbarTitle: '客户回访',
	type: '',
	edit_id: null,
})
onLoad(option => {
	get_staff_list()
	get_client_list()
	pageInfo.type = option.type
	if (option.type == 'edit') {
		pageInfo.navbarTitle = `${pageInfo.navbarTitle}(修改)`
		get_detail(option.id)
		pageInfo.edit_id = option.id
	}
	if (option.type == 'add') {
		pageInfo.navbarTitle = `${pageInfo.navbarTitle}(新增)`
	}
})

const refForm = ref(null);
const form = reactive({
	client: null,
	way: '',
	title: '',
	interviewee: '',
	res: '',
	address: '',
	traffic: '',
	create_user_id: null,
	desc: '',
	content: '',
	visit_date: ''
});
const fields = Object.keys(form);
const rules = {
	way: { rules: [{ required: true, errorMessage: '请选择投诉客户' }] },
	title: { rules: [{ required: true, errorMessage: '请输入回访主题' }] },
	content: { rules: [{ required: true, errorMessage: '请输入回访内容' }] },
	interviewee: { rules: [{ required: true, errorMessage: '请输入受访人' }] },
	res: { rules: [{ required: true, errorMessage: '请输入回访结果' }] },
	visit_date: { rules: [{ required: true, errorMessage: '请选择回访日期' }] },
	client: { rules: [{ required: true, errorMessage: '请选择投诉客户' }] },
}

function get_detail(id) {
	clCallbackApi.client_visit_detail(id).then(res => {
		const record = uni.$lodash.pick(res, fields)
		Object.assign(form, record)
	})
};

function accChange(id) {
	const user = account_list.value.find(v => v.value == id)
	if (user) {
		form.create_full_name = user.text
	}
};
//提交操作
function save() {
	refForm.value.validate().then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		if (pageInfo.type == 'add') {
			clCallbackApi.post_client_visit(params).then(res => {
				uni.$u.toast('添加成功')
				setTimeout(() => {
					backRefsh();
				}, 1000)
			})
		} else {
			//修改
			clCallbackApi.patch_client_visit(params, pageInfo.edit_id).then((res) => {
				uni.$u.toast('修改成功')
				setTimeout(() => {
					backRefsh();
				}, 1000)
			})
		}

	}).catch((error) => {
		uni.$u.toast(error[0].errorMessage);
	})
};

const client_list = ref([]);
function get_client_list() {
	clCallbackApi.get_client({ page: 1, page_size: 99999 }).then(res => {
		client_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};

const account_list = ref([]);
function get_staff_list() {
	clCallbackApi.get_staff({ page: 1, page_size: 99999 }).then(res => {
		account_list.value = res.results.map(v => ({
			text: v.full_name,
			value: v.id
		}))
	})
};
//返回上一级并刷新上一级页面9 
function backRefsh() {
	uni.navigateBack({
		delta: 1, // 返回的页面层数，1 表示返回上一级
		success: () => {
			uni.$bus.useBusEmit('cl_callback:refresh')
		}
	})
}
</script>

<style lang="scss" scoped></style>